.article
  margin-bottom: block-margin

.article-inner
  @extend $card
  overflow: hidden
  margin-bottom: block-margin
  display: flex

.article-main
  border-radius: card-radius
  z-index: 50
  position: relative
  background: var(--card-background)
  transition: background trans-style
  width: 100%
  margin-right: -16px
  padding-bottom: 16px

.article-meta
  clearfix()

.article-date
  @extend $block-caption
  float: left

.meta-info-bar
  color: var(--article-meta)
  font-size: 16px
  font-weight: medium
  text-decoration: none
  display: flex
  align-items: center
  *
    white-space: nowrap
  .meta-info
    transition: color trans-style, outline trans-style, background trans-style
  a
    color: var(--article-meta)
    border-radius: 6px
    margin: -4px
    padding: 4px
    &:hover
      outline-color: var(--btn-bg)
      background: var(--btn-bg)
      color: var(--link)
  .meta-cate-flex
    display: flex
    gap: 6px
    *
      transition: background trans-style, color trans-style
  .need-seperator
    display: flex
    align-items: center
    &:before
      content: ""
      position: relative
      transition: background trans-style
      background: var(--neut-L30)
      height: 4px
      width: 4px
      border-radius: 50%
      margin: 0 16px
      @media mq-mobile
        margin: 0 12px

.article-category-link
  @extend $block-caption
  margin: 0 12px 1em

.article-header
  padding: article-top-padding article-side-padding 0
  @media mq-mobile
    padding: article-top-padding mobile-article-side-padding 0
  h1
    margin-bottom: 0
  .meta-info-bar
    margin-bottom: 6px

.right-panel
  display: flex
  justify-content: flex-end
  align-items: center
  background-size: cover
  background-position: center center
  background-repeat: no-repeat
  transition: all trans-style;
  @media mq-mobile
    display: none
  &.non-pic
    min-width: 76px
    background: var(--enter-btn-bg)
    i
      color: var(--primary)
      font-size: 24px
      margin-right: 24px
    &:hover
      background: var(--enter-btn-hover)
    &:active
      background: var(--enter-btn-active)
  &.with-pic
    transition: 0.3s all ease-out
    min-width: 35%
    .overlay
      height: 100%
      width: 100%
      background: var(--img-overlay)
      transition: background trans-style
      display: flex
      align-items: center
      justify-content: center
      i
        opacity: 0
        transition: opacity trans-style
        margin-right: 0
        color: white
        font-size: 40px
    .non-pic
      display: none
    .overlay
      &:hover
        background: rgba(black, 0.5)
        i
          display: block
          opacity: 1
      &:active
        background: rgba(black, 0.6)


// @css {
//   .right-panel.with-pic {
//     width: min(30%, 360px)
//   }
// }

.truncate-text
  overflow: hidden
  text-overflow: ellipsis
  display: -webkit-box
  -webkit-line-clamp: 3 // number of lines to show
  line-clamp: 3
  -webkit-box-orient: vertical
  margin: 16px 0
  line-height: line-height
  word-break: break-word

.article-title
  @extend $main-title
  a&:hover
    color: var(--title-hover)
  a&:active
    color: var(--title-active)
  h1
    width: 100%
    a
      width: 100%


.article-entry
  @extend $base-style
  clearfix()
  color: var(--article-text)
  padding: 0 article-side-padding
  transition: color trans-style
  @media mq-mobile
    padding 0 mobile-article-side-padding
  p, table
    line-height: line-height
    margin: 1.2em 0
  h1, h2, h3, h4, h5, h6
    font-weight: bold
  h1, h2, h3, h4, h5, h6
    line-height: line-height-title
    margin: line-height-title 0
  a
    @extend $text-link
  ul, ol, dl
    margin-top: line-height
    margin-bottom: line-height
  img, video
    max-width: 100%
    border-radius: inner-radius
    height: auto
    display: block
    margin: auto
  iframe
    border-radius: inner-radius
    border: none
  table
    width: 100%
    border-collapse: collapse
    border-spacing: 0
  th
    font-weight: bold
    border-bottom: 3px solid color-border
    padding-bottom: 0.5em
  td
    border-bottom: 1px solid color-border
    padding: 10px 0
  blockquote
    background: var(--blockquote-bg)
    padding: 0 24px
    border-radius: inner-radius
    display: flex
    flex-direction: column
    flex-wrap: nowrap
    margin: 1.2em 0
    transition: background trans-style
  footer
      font-size: font-size
      margin: line-height 0
      font-family: font-sans
      text-align: right
      cite
        &:before
          content: "—"
          padding: 0 0.5em
  .pullquote
    text-align: left
    width: 45%
    margin: 0
    &.left
      margin-right: 1em
      float: left
    &.right
      margin-left: 1em
      float: right
  .caption
    color: color-grey
    display: block
    font-size: 0.9em
    margin-top: 0.5em
    position: relative
    text-align: center
  // http://webdesignerwall.com/tutorials/css-elastic-videos
  .video-container
    position: relative
    padding-top: (9 / 16 * 100)% // 16:9 ratio
    height: 0
    overflow: hidden
    margin: 1.6em 0
    iframe, object, embed
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      margin-top: 0

.article-more-link
  display: flex
  align-items: center;
  justify-content: flex-end
  gap: 8px;
  float: right
  line-height: 40px
  color: var(--btn-text-content)
  text-decoration: none
  font-size: 16px
  font-weight: medium
  padding-left: 24px
  padding-right: article-side-padding
  border-radius: inner-radius 0 0 inner-radius
  transition: background trans-style, padding-right trans-style
  &:hover
    padding-right: article-side-padding - 4px
    background: var(--btn-text-hover)
    text-decoration: none

.article-footer
  clearfix()
  font-size: 0.85em
  line-height: line-height
  // border-top: 1px solid color-border
  margin: 0 0 0 (article-side-padding - 16px)

.widget-tag-list
.article-tag-list
  margin-top: 12px
  display: flex
  flex-wrap: wrap
  row-gap: 10px
  column-gap: 8px

.article-tag-list-link
.widget-tag-list-link
  @extend $text-btn
  color: var(--btn-content)
  font-size: 14px
  font-weight: medium  
  display: flex
  align-items: center
  &:hover
    color: var(--btn-content-hover)

.article-tag-list-link
  &:before
    content: ""
    display: block
    height: 4px
    width: 4px
    border-radius: 50%
    background: var(--tag-dot)
    margin-right: 8px
    transition: background trans-style
    @media mq-mobile
      display: none

.article-comment-link
  float: right
  &:before
    content: "\f075"
    font-family: font-icon
    padding-right: 8px

.article-share-link
  color: var(--btn-text-content)
  cursor: pointer
  float: left
  font-size: 16px
  font-weight: medium
  display: flex
  align-items: center
  gap: 8px
  padding: 0 16px
  height: 40px
  transition: background trans-style
  border-radius: inner-radius
  &:hover
    background: var(--btn-text-hover)
    text-decoration: none

#article-nav
  // clearfix()
  position: relative
  display: flex
  gap: block-margin
  // @media mq-normal
  //   margin: block-margin 0
  //   &:before
  //     absolute-center(8px)
  //     content: ""
  .article-nav-btn
    @extend $card-btn
    width: 100%
    height: 60px
    display: flex
    padding: 0 24px
    gap: 20px
    color: var(--neut-L75)
    font-weight: bold
    font-size: 16px
    overflow: hidden
    transition: background trans-style, color trans-style
    i
      color: var(--primary)
      font-size: 20px
    &.left
      justify-content: flex-start
    &.right
      justify-content: flex-end
    &.disabled
      opacity: 0
    .title-text
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis

.article-nav-link-wrap
  text-decoration: none
  box-sizing: border-box
  margin-top: block-margin
  text-align: center
  display: block
  padding: 12px
  border-radius: inner-radius
  &:hover
    color: var(--link)
    background: var(--card-background)
  @media mq-normal
    margin-top: 0

#article-nav-newer
  @media mq-normal
    float: left
    text-align: left
    padding-right: 20px

#article-nav-older
  @media mq-normal
    float: right
    text-align: right
    padding-left: 20px

.article-nav-caption
  text-transform: uppercase
  letter-spacing: 2px
  color: color-border
  line-height: 1em
  font-weight: bold
  #article-nav-newer &
    margin-right: -2px

.article-nav-title
  font-size: 0.85em
  line-height: line-height
  margin-top: 0.5em

.article-gallery
  position: relative
  border-radius: card-radius card-radius 0 0
  overflow: hidden
  margin-bottom: - card-radius

.article-gallery-photos
  position: relative
  overflow: hidden

.article-gallery-img
  display: none
  max-width: 100%
  &:first-child
    display: block
  &.loaded
    position: absolute
    display: block
  img
    display: block
    width: 100%
    object-fit: cover
    margin: 0 auto
    max-height: 40vh
    